<template>
    <div>
        <el-row :gutter="40" style="padding:20px">
            <el-col :span="6"  class="p10">
                <h2>&nbsp;&nbsp;今日須出貨包裹數量</h2>
                <br>
                <div class="w50 fl">
                    <div class="font ta">
                         <span>{{parcelCount.singleParcelCount}}</span>  
                     </div>
                     <div>
                             <span class="fr">單件裝</span>
                     </div>
                </div>
                <div class="w50 fr "> 
                     <div class="font ta">
                        <span>{{parcelCount.multiParcelCount}}</span>
                    </div>
                    <div>
                         <span class="fr">多件裝</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" class="p10">
                  <h2>&nbsp;&nbsp;目前準備出貨包裹數量</h2>
                <br>
                <div class="w50 fl">
                    <div class="font ta">
                         <span>{{parcelCount.currectPackedSingleParcelCount}}</span>  
                     </div>
                     <div>
                             <span class="fr">單件裝</span>
                     </div>
                </div>
                <div class="w50 fr "> 
                     <div class="font ta">
                        <span>{{parcelCount.currectPackedMultiParcelCount}}</span>
                    </div>
                    <div>
                         <span class="fr">多件裝</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" class="p10"></el-col>
            <el-col :span="6" class="p10"></el-col>
        </el-row>
    </div>
</template>
<script>
export default { 
    data:()=>({
        parcelCount:{}
    }),
    created(){
        this.axios({
            url:'http://api.myfbmanage.com:8000/data-server/dashboard/all',
            method:'post',
            data:{
                token: this.token,
            }
        }).then((res)=>{
            
            this.parcelCount = this.loadsh.cloneDeep(res.parcelCount);
             console.log(this.parcelCount,res)   
        }).catch(()=>{
            
        })
    }
}
</script>
<style scoped>
.fl{
    float:left
}
.fr{
    float:right
}
.font{
    font-size: 40px;
    color:rgb(122, 113, 202);
}
.w100{
    width: 100%;
}
.p10{
    padding: 10px
}
.clear::after{
    content: '';
    display:block;
    clear: both;
}
.w50{
    width: 50%;
}
.ta{
    text-align: center
}
</style>



